<!-- 单列数据具有+ 无 el-tooltip -->
<template>
  <el-table class="jk_common_table004" style="width: 100%; height: 100%" height="style" ref="dataTable"
    :data="tableData" :class="pagesShow ? 'THeightPage' : 'THeight'" :size="size" border
    :header-cell-style="headerStyle" :cell-style="cellStyle" :row-key="rowKey" default-expand-all @row-click="rowClick"
    @selection-change="handleSelectionChange" v-loading="tableLoading">
    <template #empty>
      <div class="table-empty">
        <img src="/images/table-empty.png" alt="" />
        <p>暂无数据</p>
      </div>
    </template>
    <el-table-column v-if="selection" type="selection" width="35" />

    <el-table-column v-if="selectOne" label="选择" width="55">
      <template slot-scope="scope">
        <el-radio :label="scope.row.id" v-model="selectId">
          {{ "" }}
        </el-radio>
      </template>
    </el-table-column>

    <el-table-column v-if="showIndex" type="index" width="60" label="序号" :fixed="isFixed ? 'left' : false" />
    <el-table-column v-for="(item, index) in colsData" :key="index" :prop="item.prop" :label="item.label"
      :align="item.align" :width="item.width ? item.width : ''" :sortable="item.sortable">
      <template #header>
        <span v-html="item.label"></span>
      </template>

      <template v-slot="scope">
        <template v-if="item.filter">
          {{ item.filter(scope.row[item.prop]) }}
        </template>
        <template v-else>
          {{ scope.row[item.prop] }}
        </template>
      </template>
    </el-table-column>

    <!-- fixed="right" 透明背景有冲突-->
    <el-table-column label="操作" v-if="actions.length > 0" width="150" :fixed="isFixed ? 'right' : false" align="center">
      <template v-slot="scope">
        <template v-for="(action, index) in actions">
          <el-popconfirm v-if="action.action == 'delete'" title="确定删除吗？"
            @confirm="actionClick(action.action, scope.row)">
            <el-button slot="reference" :key="index" size="mini" type="text" :icon="action.icon">{{ action.name
              }}</el-button>
          </el-popconfirm>
          <el-button v-else :key="index" size="mini" type="text" :icon="action.icon" style="margin-right: 20px;"
            @click.stop="actionClick(action.action, scope.row)">{{ action.name }}</el-button></template>
      </template>
    </el-table-column>
  </el-table>
</template>
<script>
export default {
  props: {
    tableData: {
      type: Array,
      default: () => {
        return [];
      },
    },
    tableLoading: false,
    size: {
      type: String,
      defalut: "defalut",
    },
    headerStyle: {
      type: Object,
      default: () => {
        return {};
      },
    },
    cellStyle: {
      type: Object,
      default: () => {
        return {};
      },
    },
    colsData: {
      type: Array,
      default: () => {
        return [];
      },
    },
    actions: {
      type: Array,
      default: () => {
        return [];
      },
    },
    selection: {
      type: Boolean,
      defalut: false,
    },
    showIndex: {
      type: Boolean,
      default: true,
    },
    pagesShow: {
      type: Boolean,
      default: false,
    },
    pager: {
      type: Object,
      default: () => {
        return {
          total: 0,
          current: 1,
          pageSize: 25,
        };
      },
    },
    rowKey: String,
    currentEditRow: {
      type: Object,
      default: () => {
        return {};
      },
    },
    isFixed: {
      type: Boolean,
      default: false,
    },
    selectOne: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      exp: () => /^[0-9]+.?[0-9]*$/,
      currentRow: null,
      selectId: "",
    };
  },
  watch: {
    selectId(val) {
      this.$emit("changeSelectId", val);
    },
  },
  methods: {
    rowClick(row) {
      this.$emit("rowClick", row);
    },
    handleSelectionChange(rows) {
      this.$emit("handleSelectionChange", rows);
    },
    handleCurrentChange(val) {
      this.$emit("paginationChangeCur", val);
    },
    isNumber(val) {
      if (!val) return false;
      return this.exp.test(val);
    },
    actionClick(actionType, row) {
      this.$emit(actionType, JSON.parse(JSON.stringify(row)));
    },
  },
};
</script>
<style lang="scss" scoped>
.common-table {
  height: 100%;
}

::v-deep .el-input--mini .el-input__inner {
  // height: 20px;
  // line-height: 20px;
}
</style>
